//details页面所有的js代码
require(['./config'],() => {
    require(['template','request','header','elevatezoom','footer','info','jquery'],(template,req,header) =>{
        class Details{
            constructor(){
                this.count = 1;
                this.init();
            }
            init(){
                //获取地址栏的id
                var id = window.location.search.split('=')[1];
                // console.log(id);
                req.getDetailsData(id)
                    .then(res => {
                        // console.log(res);
                        if(res.code === 200){
                            //渲染页面
                            this.render(res.data.detail)
                        }
                    })
            }
            //渲染页面
            render(res){
                // console.log(res);
                //在这里先把需要的数据解构出来，再传到模板里去
                /* 
                    image:主图
                    id:商品id
                    photo:放大镜的小图
                    title:标题
                    descContentList:详情
                    price:价格
                    accessoryHints:提示
                
                */
                var { image , id , photo , title , price  , descContentList , accessoryHints} = res;
                var html = template('detailsTemplate',{image,id,photo,title,price,accessoryHints});
                $('.details').html(html);
                $('.intruduce').html(template('introduceTemplate',{descContentList}));

                this.initZoom();
                this.addReduce();
                this.addToCar({image,id,title,price});

            }

            //放大镜
            initZoom(){
                $('.zoom-image').elevateZoom({
                    gallery:'smPicBox'
                })
            }

            //数量加减
            addReduce(){
                $('.reduceBtn').click(() => {
                    this.count--;
                    if(this.count <= 1){
                        //判断如果小于1 就让他等于1
                        this.count = 1;
                    }
                    $('.countBox').val(this.count);
                })
                $('.addBtn').click(() => {
                    this.count++;
                    $('.countBox').val(this.count);
                })
            }

            //点击加入购物车  localStorage 模拟
            addToCar(options){
                var {image,id,title,price} = options;
                /*
                1. 判断localstorage里面有没有这条数据
                    - 有
                        + 数组里面没有这一条信息，那就吧这一条信息加到数组里面，重新存一下
                        + 数组里面有这条信息，找到这条数据，让他的count+ 1 然后再存一下
                    - 没有
                        直接存

                */
            //    console.log($('.shopCars'))
                $('.shopCars').click(() => {
                    var prodList = localStorage.getItem('prodList');
                    if(prodList){
                        //localStorage里面有一条数据叫做 prodList
                        //先转为数组再遍历循环
                        prodList = JSON.parse(prodList);
                        //判断prodList里面有没有这个数据
                        var flag = prodList.some((item,index) => {
                            return item.id === id;
                        })
                        //判断
                        if(flag){
                            //代表prodList里面有这条数据 count+this.count
                            prodList.forEach(item => {
                                if(item.id === id){
                                    item.count += this.count
                                }
                            })
                        }else{
                            //代表 prodList 里面没有这条数据 往里面加一条数据
                            prodList.push({id,image,title,price,count:this.count,isChecked:true});
                        }
                        // console.log(prodList);
                        localStorage.setItem('prodList',JSON.stringify(prodList));
                    }else{
                        localStorage.setItem('prodList',JSON.stringify([{id,image,title,price,count:this.count,isChecked:true}]))
                    }
                    $('.loading').fadeIn(1000,() => {
                        $('.loading').fadeOut(1000);
                    });
                    header.computedCount();
                })
                
            }
        }
        return new Details();
    })
})